<template>
  <view class="bannerView">
    <u-swiper
      :list="bannerImg"
      :height="screenWidth <= 768 ? 400 : 800"
      @click="swiperClik"
    ></u-swiper>
  </view>
</template>

<script setup>
import { ref, onUnmounted, onMounted } from "vue";

const screenWidth = ref(0); // 屏幕宽度
const bannerImg = ref([
  {
    image:
      "https://mp-9cd2f666-e017-4f0e-a8b2-2c4583bc29c1.cdn.bspapp.com/waimaoWeb/BODY-6547070.webp",
    title: "昨夜星辰昨夜风，画楼西畔桂堂东",
  },
]);

const swiperClik = (itemIndex) => {
  console.log(itemIndex);
};

onMounted(() => {
  screenWidth.value =
    document?.body?.offsetWidth ?? uni.getSystemInfoSync().screenWidth;
  window.addEventListener("resize", () => {
    screenWidth.value =
      document?.body?.offsetWidth ?? uni.getSystemInfoSync().screenWidth;
  });
});

onUnmounted(() => {
  window.removeEventListener("resize");
});
</script>

<style scoped lang="scss">
.bannerView {
  width: 100%;
  height: auto;
  background-color: #000;

  &.pcView {
    width: 100%;
    height: 400px;
  }

  &.mobileView {
    width: 100%;
    height: 400rpx;
  }
}
</style>
